<div class="container-fluid maindiv">

  <div class="row-fluid">
    <!--This is the left panel of the user profile page that contains main info of user as his image and if his image is nil then will display the default image for our application along with his status whether active or non-active along with his email-->
    <div class="sidebar-nav-fixed" >
      <ul class="well nav nav-list left_panel-user-profile-page ">
        <div class="user-image">
           <a href="/users/<%= @user.id%>">
                   
                <% if @user.image.nil? || 
                      @user.image == "" %>
                     <%= image_tag "logo.jpeg",:class => "img-user-img"%>
                  <% else %>
                    <img src= "<%= @user.image %>" 
                      width="15%" style="height:10%"/>
                  <% end %> 
           </a>
        </div>
         <div id="user-personal-info"> 
           <li class="nav-header">Email
           <br />
             <span class="label label-info" id="my-email"><%= @user.email %> </span>
           </li>
           <li class="divider"></li>
           <li class="nav-header">Name
           <br />
             <span class="label label-info" id="my-email">
              <% if @user.name.nil? %>
                     <%= @user.email.split("@")[0]%>
                  <% else %>
                   <%= @user.name %>
                  <% end %> 
             </span>
           </li>
           <li class="divider"></li>
           <li class="nav-header">Status
           <br />
             <span id="is-active">
             <% if @user.deactivated %>
               <span class="label label-important">Deactivated</span> 
             <% else %>
               <span class="label label-success">Active</span> 
             <% end %>
           </span>
              
           </li>
           <li class="divider"></li>
           <li class="nav-header">Rank <br />
            <span class="label label-info"><%=@user.get_user_rank %></span></li>
         

         </div>
       </ul>
          <!--This is the right panel of the user profile page that contains three buttons button used to deactivate the user, one to go to his statistics page and the third one to reset his password-->
       <div>
        <ul class="well nav nav-list left_panel-user-profile-page" style="margin-top:10px;">
          <li class="nav-header">Options</li>
          <li class="divider"></li>
          <%= link_to('Statistics', {:controller => 'statistics', :action => 'users', :id => @user.id}, class: "btn btn-large btn-primary btn-fixed-left-side-bar", id: "statistics_button") %>
          
          <li class="divider"></li>
           <%= link_to('Reset Password', {:controller => 'users', :action => 'force_reset_password', :id => @user.id}, class: "btn btn-large btn-warning btn-fixed-left-side-bar", id: "reset_password_button") %>
          
          <li class="divider"></li>
          
          <% if @user.deactivated %>
            <div id="myModal" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
              <button class="close" data-dismiss="modal">×</button>
              <h3>Confirmation message</h3>
            </div>
            <div class="modal-body">
              <h4>Are you sure you want to activate this user ?</h4>
              
            </div>
            <div class="modal-footer">
              <a href="#" class="btn btn-large" data-dismiss="modal">Cancel</a>
              <%= link_to('Activate', {:controller => 'users', :action => 'activate', :id => @user.id}, class: "btn btn-large btn-success", id: "deactivate_button") %>
            </div>
            </div>
            <a data-toggle="modal" href="#myModal" class="btn btn-success btn-large">Activate</a>
              
            <% else %>
            <div id="myModal" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
              <button class="close" data-dismiss="modal">×</button>
              <h3>Confirmation message</h3>
            </div>
            <div class="modal-body">
              <h4>Are you sure you want to deactivate this user ?</h4>
              
            </div>
            <div class="modal-footer">
              <a href="#" class="btn btn-large" data-dismiss="modal">Cancel</a>
              <%= link_to('Deactivate', {:controller => 'users', :action => 'deactivate', :id => @user.id}, class: "btn btn-large btn-danger", id: "deactivate_button") %>
            </div>
          </div>
            <a data-toggle="modal" href="#myModal" class="btn btn-danger btn-large btn-fixed-left-side-bar">Deactivate</a>
              
            <% end %>
        </ul>
      </div>
     </div>
      <!--This is the main panel of the user profile page that contains three tabs the first one contains the recent activity of that user in the form of log message and all related variables in that log in the form of links to these variables show page whether these variables are stories, other users or interests and when this log occured with respect to the current time, The second one contains a list of user components of this user's friends, The third one contains a list of interests that the user is subscribed to as a list of interests' components-->
     <div class="main-user-profile-page">
      <div class="middle-user-profile-page-panel" >
          <ul id="myTab" class="nav nav-tabs ">
            <li class="active"><a href="#recentActivity" data-toggle="tab">
              <h3 class="interest-page-text">Recent Activity </h3></a></li>
            <li><a href="#friends" data-toggle="tab"><h3 class="interest-page-text">Friends</h3></a></li>
            <li><a href="#interests" data-toggle="tab"><h3 class="interest-page-text">Interests</h3></a></li>
          </ul>
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="recentActivity">
              <table class="table table-striped table-bordered">
                <tbody>
                  <% if @logs== [] %>
                    No recent Activity
                  <% end %>
                  <% if @logs != nil %>
                    <% @logs.each do |l| %>
                      <tr >
                
                        <td><%=  l.message %></td>
                        <td><%=  if(l.user_id_1 != nil and l.user_id_1 != @user.id)
                         link_to User.find(l.user_id_1).name,{:controller => 'users', :action => 'show', :id => l.user_id_1 },  class: " btn btn-primary btn-danger"   
                           end%>
                            <%= if(l.user_id_2 != nil and l.user_id_2 != @user.id)
                            link_to User.find(l.user_id_2).name,{:controller => 'users', :action => 'show', :id => l.user_id_2 }, class: "btn btn-primary  btn-danger"  
                            end%>
              
                            <%= if(l.story_id != nil)
                            link_to Story.find(l.story_id).title,{:controller => 'stories', :action => 'show', :id => l.story_id },class: "btn btn-primary  btn-warning"  
                            end%>
                            <%= if(l.interest_id != nil)
                           link_to Interest.find(l.interest_id).name,{:controller => 'interests', :action => 'show', :id => l.interest_id },  class: "btn btn-primary  btn-success" 
                            end%>
                        </td>
                        <td class="logs-table-row"><%= time_ago_in_words(l.created_at) + " ago" %></td>
                      </tr>
                    <% end %>
                  <% end %>
              </tbody>
             </table>
             
            </div>
            <div class="tab-pane fade" id="friends">
              <% if (@friends.length) == 0 %>
                 No Friends Available.
               <% end %>
              <% @friends.each do |user| %>
                 <div class="well-user-component">
                   <a href="/users/<%= user.id%>"
                     style="display:block; float:left; height:100px;">
                    <% if not user.image? %>
                     <%= image_tag "logo.jpeg", :class=>"img-user-component" %>
                    <% else %>
                     <img src= "<%= user.image %>" width="80" style="height:100px"/>
                    <% end %>
                   </a>
                   <div style="padding-left:10px; margin-left:100px;">
                    <h3>
                    <% if user.name.nil? %>
                      <%= user.email.split("@")[0] %>
                    <% else %>
                      <%= user.name %>
                    <% end %>
                   </h3>
                   <%= link_to "Profile",
                   {:controller => 'users', :action => 'show',:id => user.id },
                    class: "interest-component-button-absolute btn btn-warning"%>
              
                   <h5>Email : <%=user.email%></h5>
                   <h5>Rank : <%= user.get_user_rank %></h5>
                   <%= link_to "Statistics",
                    {:controller => 'statistics', :action => 'users',:id => user.id },
                     class: "interest-component-button-absolute btn btn-primary"%>
                   <h5>Registration date : <%=time_ago_in_words(user.created_at) + " ago"%></h5>
              
                   <% if !(user.deactivated) %>
          
                       <span class="greenbadge"  style="width:100%" >Active</span>

                   <% else%>

                       <span class="redbadge"  style="width:100%">Deactivated</span>

                   <% end %>
                 </div>
                </div>
              <% end %>
            </div>
            <div class="tab-pane fade" id="interests">
                 <% if @interests.length == 0 %>
                 No interests Available.
                 <% end %>
                 <% @interests.each do |interest| %>
                   <div class="well-interest-component">
                     <a href="/interests/<%= interest.id%>"
                     style="display:block; float:left; height:100px;">
                     <% if not interest.photo.file? %>
                       <%= image_tag "logo.jpeg", :class=>"img-user-component" %>
                     <% else %>
                       <img src= "<%= interest.photo.url(:small) if interest.photo.file? %>" width="80" style="height:100px"/>
                     <% end %> 
                     </a>
                     <div style="padding-left:10px; margin-left:100px;">
                      <h3>
                       <%= interest.name  %>
                      </h3>
                       <%= link_to "Interest", 
                       {:controller => 'interests', :action => 'show',:id => interest.id }, 
                      class: "interest-component-button-absolute btn btn-warning"%>
                      <h5>Rank : <%=interest.get_interest_rank%></h5>
                      <h5>No Of Stories: <%=interest.stories.count%></h5>
                      <%= link_to "Statistics", 
                        {:controller => 'statistics', :action => 'interests',:id => interest.id }, 
                        class: "interest-component-button-absolute btn btn-primary"%>
                      <h5>No Of Subscribers: <%=interest.adding_users.count%></h5>
                      <% if !(interest.deleted ) %>
                        <span class="greenbadge"  style="width:100%" >Active</span>
                      <% elsif interest.deleted %>
                        <span class="redbadge"  style="width:100%">Blocked</span>
                     <% end %>
                    </div>
                  </div>
                <% end %>
            </div>
          </div>
        </div>
      </div>
    
      
  </div>
</div>




